<style include="settings-shared">
  :host {
    align-items: center;
    display: flex;
    margin-inline-start: 36px;
    min-height: var(--settings-row-min-height);
  }

  img {
    /* Dimensions of the image are set in the URL. */
    margin-inline-end: 16px;
  }

  iron-icon[icon='cr:open-in-new'] {
    fill: var(--text-color);
    height: var(--cr-icon-size);
    margin-inline-end: -10px;
    margin-inline-start: 6px;
    width: var(--cr-icon-size);
  }

  #disable {
    margin-inline-start: 8px;
  }

  /* Using ">" operator to ensure that this CSS rule will not accidentally
   * be applied to a search highlight span (which is inserted dynamically if
   * when search "hit" occurs within this element. */
  :host > span {
    flex: 1;
    margin-inline-end: 8px;
  }
</style>
<img role="presentation" src="chrome://extension-icon/[[extensionId]]/20/1">
<span>[[getLabel_(extensionName)]]</span>
<cr-button id="manage" on-click="onManageClick_">
  $i18n{manage}
  <iron-icon icon="cr:open-in-new"></iron-icon>
</cr-button>
<template is="dom-if" if="[[extensionCanBeDisabled]]" restamp>
  <cr-button id="disable" on-click="onDisableClick_">$i18n{disable}</cr-button>
</template>
